<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
    <!-- 头部区域 -->
    <div class="dp_top">
      <!-- 返回、天气 -->
      <div class="dt_back_weather">
        <img class="dbw_fh" src="../../../assets/largescreen/new/top_back.png" alt="" @click="goBack" />
        <div class="dbw_tianqi">
          <img :src="qihouimg" />
          <div class="tianqi">{{ tianqi }} {{ wendu }}℃</div>
        </div>
      </div>
      <!-- 类型 -->
      <div class="dt_type dt_type_ykhx" @click="toTurn(1)">
        <div>游客画像</div>
      </div>
      <div class="dt_type dt_type_jq selected_left" @click="toTurn(2)">
        <div>景区</div>
      </div>
      <div class="dt_type dt_type_jdms" @click="toTurn(3)">
        <div>酒店民宿</div>
      </div>
      <div class="dt_type dt_type_jt" @click="toTurn(4)">
        <div>交通</div>
      </div>
      <!-- 当前时间 -->
      <div class="dt_time">{{ currentTime }}</div>
      <!-- 中间文字隐藏区域用于点击切换首页 -->
      <div class="dt_click" @click="toTurn(0)"></div>
    </div>
    <!-- 中间区域 -->
    <div class="dp_middle">
      <!-- 中间区域的左边部分 -->
      <div class="dm_left">
        <div class="box dp_box">
          <div class="b_title">近7天预约趋势</div>
          <div class="db_content">
            <div class="chart" ref="lineChartRef" style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <div class="box dp_box">
          <div class="b_title">今日预约量</div>
          <div class="db_content">
            <div class="chart tableDiv">
              <vue-seamless-scroll ref="vueSeamlessPhbRef" class="scroll-list-seamless-phb" :data="data1Copy"
                :class-option="defaultOption">
                <ul class="ul-scoll">
                  <li v-for="(item, index) in data1" :key="index" class="td_item">
                    <div class="tdi_left">
                      <div class="tdil_top" :style="{
                        'background-image':
                          'url(' +
                          require('../../../assets/largescreen/top' +
                            (index < 3 ? index + 1 : 4) +
                            '.png') +
                          ')',
                      }">
                        TOP.{{ index + 1 }}
                      </div>
                      <div class="tdil_name">{{ item.scenicName }}</div>
                    </div>
                    <div class="tdi_right">{{ item.sumCount }}人次</div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="box dp_box lp3">
          <div class="b_title">热门景区排行(年)</div>
          <div class="db_content">
            <div class="chart">
              <div class="dot">
                <span> <i></i>工作日 </span>
                <span> <i></i>节假日 </span>
              </div>
              <div class="tit">
                <span>排名</span>
                <span>景区名称</span>
                <span>客流量/人次</span>
              </div>
              <div class="data">
                <span v-for="item in xdata" :key="item">{{ item }}万</span>
              </div>
              <div class="mjzyx_pm">
                <vue-seamless-scroll ref="vueSeamlessRef" class="scroll-list-seamless" :data="data2Copy"
                  :class-option="defaultOption">
                  <ul class="ul-scoll">
                    <li v-for="(item, index) in data2" :key="index" class="mpm_item">
                      <div class="mpmi_left">
                        <div class="mpmil_top" :style="{
                          'background-image':
                            'url(' +
                            require('../../../assets/largescreen/top' +
                              (index < 3 ? index + 1 : 4) +
                              '.png') +
                            ')',
                        }">
                          TOP.{{ index + 1 }}
                        </div>
                        <div class="mpmil_city">{{ item.scenicName }}</div>
                        <div class="mpmil_line"></div>
                        <div class="mpmil_bl">
                          <div class="mpmil_bl_bfb" :style="{
                            width:
                              (parseFloat(item.workCount || 0) /
                                RankingTotal) *
                              100 +
                              '%',
                          }"></div>
                          <div class="mpmil_bl_bfb" :style="{
                            width:
                              (parseFloat(item.holidayCount || 0) /
                                RankingTotal) *
                              100 +
                              '%',
                          }"></div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间区域的中间部分 -->
      <div class="dm_center">
        <div class="dmc_map">
          <div class="dmcm_nums">
            <div class="dn_pte">
              <div class="title">今日预约门票(张)</div>
              <div class="nums">
                <div class="n_item" v-for="(num, idx) in todayBookingsArr" :key="idx">
                  {{ num }}
                </div>
              </div>
            </div>
            <div class="dn_pte">
              <div class="title">今日景区游客(人)</div>
              <div class="nums">
                <div class="n_item" v-for="(num, idx) in enterIslands" :key="idx">
                  {{ num }}
                </div>
              </div>
            </div>
            <div class="dn_pte">
              <div class="title">年累计核销门票(张)</div>
              <div class="nums">
                <div class="n_item" v-for="(num, idx) in scenicTicketCountArr" :key="idx">
                  {{ num }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="box c_b_box">
          <!-- 标题 -->
          <div class="b_title">年度客流对比</div>
          <div class="db_content">
            <div class="chart" ref="Visitorage" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
      <!-- 中间区域的右边部分 -->
      <div class="dm_right">
        <div class="box dp_box">
          <div class="b_title">景区游客数量统计</div>
          <div class="db_content">
            <div class="chart" ref="ykslChart" style="width:100%;height:100%"></div>
          </div>
        </div>
        <div class="box dp_box">
          <div class="b_title">景区客源地分析</div>
          <div class="db_content">
            <div class="chart">
              <span class="looMap" @click="lookMap()">查看地图分布 ></span>
              <div ref="areaPie" style="height: calc(100% - 0px); width: 100%"></div>
            </div>
          </div>
        </div>
        <div class="box dp_box">
          <div class="b_title">景区游客年龄分布</div>
          <div class="db_content">
            <div class="chart" ref="yknlChart" style="width:100%;height:100%"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间动态背景地图 -->
    <div class="dp_map"></div>
    <!-- 乡镇地图标记点 -->
    <div class="map_town" :class="townIndex === index ? 'town_active' : ''" :style="town.style"
      v-for="(town, index) in townList" :key="index" @click="changeTown(town.id, index)">
      {{ town.name }}
    </div>
    <!-- 底部区域 -->
    <div class="dp_bottom"></div>
    <dia-div :areaData="areaData" ref="mapDiv"></dia-div>
  </v-scale-screen>
</template>
<script>
var sjTimer, refreshTimer;
import * as echarts from "echarts";
import "echarts-gl";
import diaDiv from "./mapDia";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
    diaDiv,
  },
  data() {
    return {
      // 头部
      qihouimg: "",
      tianqi: "",
      wendu: "",
      currentTime: "",
      routerCfg: {
        0: "/cockpit-home",
        1: "/cockpit-cockpitjd",
        2: "/cockpit-cockpitjj",
        3: "/cockpit-cockpityk",
        4: "/cockpit-cockpitjt",
      },
      // 中间区域
      todayBookingsArr: [],
      scenicTicketCountArr: [],
      enterIslands: [],
      // 地图岛屿
      myislandId: [],
      areaData: [],
      data1: [],
      data2: [],
      data3: [],
      data1Copy: [],
      data2Copy: [],
      data3Copy: [],
      icons: {
        equality: {
          txt: "",
          color: "#fff",
        },
        down: {
          txt: "⬇",
          color: "red",
        },
        up: {
          txt: "⬆",
          color: "green",
        },
      },
      complainMonitoData: {}, //投诉检测
      yDate: "",

      RankingTotal: 0,
      xdata: [],
      info: {},
      myislandId: null,
      townList: [
        {
          id: "1745403093714997250",
          name: "花鸟岛",
          style: {
            left: "1100px",
            top: "281px",
          },
        },
        {
          id: "1727291339428597761",
          name: "基湖沙滩",
          style: {
            left: "905px",
            top: "464px",
          },
        },
        {
          id: "777890888",
          name: "六合朝阳景区",
          style: {
            left: "1025px",
            top: "471px",
          },
        },
        {
          id: "1745408524306878466",
          name: "三大王沙滩",
          style: {
            left: "1206px",
            top: "476px",
          },
        },
        {
          id: "564646556466",
          name: "东崖绝壁",
          style: {
            left: "1319px",
            top: "483px",
          },
        },
        {
          id: "1745446193648898050",
          name: "元宝山",
          style: {
            left: "1044px",
            top: "600px",
          },
        },
        {
          id: "1724612314713296897",
          name: "赤膊山景区",
          style: {
            left: "1100px",
            top: "589px",
          },
        },
      ],
      townIndex: 2,
    };
  },
  created() {
    let d = new Date();
    let year = d.getFullYear();
    let mon = d.getMonth() + 1;
    mon = mon > 9 ? mon : "0" + mon;
    this.yDate = year + "-" + mon;
    this.getWeather();
    this.getCurrentTime();
    sjTimer = setInterval(() => {
      this.getCurrentTime();
    }, 1000);
    this.init();
    //this.pie();
    this.getTotalData();
    //this.getVisitoragedata();
    var that = this;
    // refreshTimer = setInterval(() => {
    //   this.init();
    // }, 15000);
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    monOptions() {
      let date = new Date();
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let dateArr = [];
      for (let i = 1; i < 13; i++) {
        let json = {
          value: year + "-" + (i < 9 ? "0" + i : i),
          label: year + "-" + (i < 9 ? "0" + i : i),
          disabled: i < mon ? true : false,
        };
        dateArr.push(json);
      }
      return dateArr;
    },
  },
  beforeDestroy() {
    clearInterval(sjTimer);
    clearInterval(refreshTimer);
  },
  methods: {
    getWeather() {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive("嵊泗县", function (err, data) {
          if (data.info == "OK") {
            that.tianqi = data.weather;
            that.wendu = data.temperature;
            if (data.weather.indexOf("晴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png";
            } else if (data.weather.indexOf("暴雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png";
            } else if (data.weather.indexOf("暴雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png";
            } else if (data.weather.indexOf("冰雹") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png";
            } else if (data.weather.indexOf("大雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png";
            } else if (data.weather.indexOf("大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png";
            } else if (data.weather.indexOf("多云") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png";
            } else if (data.weather.indexOf("雷阵雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png";
            } else if (data.weather.indexOf("雾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png";
            } else if (data.weather.indexOf("小到中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png";
            } else if (data.weather.indexOf("小雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png";
            } else if (data.weather.indexOf("雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png";
            } else if (data.weather.indexOf("阴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png";
            } else if (data.weather.indexOf("雨夹雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png";
            } else if (data.weather.indexOf("阵雨@") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png";
            } else if (data.weather.indexOf("中到大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png";
            } else if (data.weather.indexOf("中雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png";
            } else if (data.weather.indexOf("中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png";
            } else if (data.weather.indexOf("霾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png";
            }
          }
        });
      });
    },
    getCurrentTime() {
      this.currentTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
    },
    goBack() {
      this.$router.replace({ path: "/home" });
    },
    toTurn(type) {
      if (this.$route.path == this.routerCfg[type]) return;
      this.$router.push({ path: this.routerCfg[type] });
    },
    getTotalData() {
      this.todayBookingsArr = [];
      this.scenicTicketCountArr = [];
      this.enterIslands = [];
      this.$http
        .post("/sys/screen/scenic/queryTabStatistics", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
            let zd = (res.data.data.todayBookings||0)+'';
            let jd = (res.data.data.scenicTicketCount||0)+'';
            let cd = (res.data.data.curScenicTotalCount||0)+'';
            for (let i=0;i<zd.length;i++){this.todayBookingsArr.push(zd.substr(i,1))};
            for (let i=0;i<jd.length;i++){this.scenicTicketCountArr.push(jd.substr(i,1))};
            for (let i=0;i<cd.length;i++){this.enterIslands.push(cd.substr(i,1))};
          }
        });
    },

    //景区客源地分析
    pie(trafficWay) {
      let myChart = echarts.init(this.$refs.areaPie);
      // let sum = trafficWay.reduce((cur, pre) => {
      //     return cur + pre.value;
      // }, 0);
      let data = [];
      let legendData = [];
      const color = [
        "#03FF96",
        "#046EFF",
        "#EA3D75",
        "#B111FF",
        "#35E9FF",
        "#6458F5",
        "#F5C460",
        "#FE5959",
        "#3062DF",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name;
        legendData.push(name);
        data.push(
          {
            value: trafficWay[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 10,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
          {
            value: 2, // 控制每个环形之间的间隙
            name: "",
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          }
        );
      }

      let option = {
        grid: {
          // 让图表占满容器
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px",
        },
        color: color,
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "30px",
          bottom: "8px",
          icon: "circle",
          textStyle: {
            color: "#C6D7F1",
            fontSize: 12,
            padding: [0, 10, 0, 0],
          },
          itemGap: 10, // 图例之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            //  borderWidth: 3
          },
          orient: "horizontal",
          data: legendData,
          align: "left",
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockwise: false,
            radius: ["40%", "60%"],
            center: ["50%", "40%"],
            emphasis: {
              scale: false,
            },
            //   avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
      this.resizeEcharts(this.$refs.areaPie);
    },

    //柱状图
    getVisitoragedata(yaxisData, yaxisData2) {
      let myChart = echarts.init(this.$refs.Visitorage);
      let xaxisData = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      // let yaxisData = [70, 120, 200, 130, 120, 170, 190, 241, 122, 112, 101, 21];
      // let yaxisData2 = [120, 110, 210, 130, 112, 117, 110, 214, 112, 112, 171, 211];
      const offsetX = 8;
      const offsetY = 4;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });

      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });

      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });

      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);

      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          borderColor: "#4ddd8f",
          padding: 5,
          textStyle: {
            color: "#C6D7F1",
          },
        },
        legend: {
          itemWidth: 20,
          itemHeight: 6,
          top: 0,
          radius: 5,
          right: 30,
          icon: "rect",
          textStyle: {
            color: "#C6D7F1",
          },
        },
        grid: {
          left: "1%",
          right: "0%",
          top: "20%",
          bottom: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xaxisData,
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        yAxis: {
          type: "value",
          name: "单位:人",
          nameTextStyle: {
            fontSize: 12,
            color: "#C6D7F1",
            fontWeight: 400,
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#545454",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0B3556",
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        series: [
          {
            name: "2023年",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const xAxisPoint = api.coord([api.value(0), 0]);
              const distance = 30;
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#152E89",
                        },
                        {
                          offset: 0.35,
                          color: "#088BFF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#152E89",
                        },
                        {
                          offset: 0.35,
                          color: "#088BFF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: "#088BFF",
                    },
                  },
                ],
              };
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#006DFF",
                },
                {
                  offset: 1,
                  color: "rgba(0, 100, 181, 0.14)",
                },
              ]),
            },
            data: yaxisData,
          },
          {
            name: "2024年",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#6AFFEB",
                        },
                        {
                          offset: 0.35,
                          color: "#6AFFEB",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#00BEAA",
                        },
                        {
                          offset: 0.35,
                          color: "#00BEAA",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "#03FFB1",
                    },
                  },
                ],
              };
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#02D8EA",
                },
                {
                  offset: 1,
                  color: "rgba(0, 201, 217, 0.40)",
                },
              ]),
            },
            data: yaxisData2,
          },
          // {
          //     type: "bar",
          //     itemStyle: {
          //         color: "transparent",
          //     },
          //     data: yaxisData,
          // },
        ],
      };
      myChart.setOption(option);
      // this.resizeEcharts(this.$refs.Visitorage);
    },
    //折线图
    lineChart(x, y) {
      let myChart = echarts.init(this.$refs.lineChartRef);
      let option = {
        tooltip: {
          trigger: "axis",
        },

        xAxis: [
          {
            type: "category",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0B3556",
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 12,
              color: "#C6D7F1",
            },
            data: x,
          },
        ],
        grid: {
          top: "50px",
          left: "30px",
          bottom: "35px",
          right: "30px",
        },
        yAxis: [
          {
            type: "value",
            name: "单位:人",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0B3556",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              color: "#C6D7F1",
              fontWeight: 400,
              fontSize: 12,
            },
            axisLabel: {
              fontSize: 12,
              color: "#C6D7F1",
            },
            min: 0,
            interval: 5000,
          },
        ],
        series: [
          {
            name: "预约量",
            type: "line",
            symbol: "circle",
            symbolSize: 4,
            // label: {
            //     normal: {
            //         show: false,
            //         position: 'top',
            //         formatter: function (d) {
            //             if ((Math.max.apply(null, rainfallValue) == d.value) || Math.min.apply(null, rainfallValue) == d.value) {
            //                 return " ";
            //             } else {
            //                 return d.value;
            //             }
            //         }
            //     }
            // },
            data: y,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00EBFD",
                  },
                  {
                    offset: 1,
                    color: "#017AF4",
                  },
                ],
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  itemStyle: {
                    label: {
                      show: false,
                    },
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
      //this.resizeEcharts(this.$refs.lineChartRef);
    },
    //景区今日预订量
    getdata1() {
      this.$http
        .post("/sys/screen/scenic/queryBookingsList", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              this.data1 = res.data.data;
            } else {
              this.data1 = [];
            }
            if (this.data1) {
              this.$nextTick(() => {
                const scrollListDom = document.querySelector(
                  ".scroll-list-seamless-phb"
                );
                if (scrollListDom) {
                  const scrollListDomLast =
                    scrollListDom.querySelectorAll("li")[
                    scrollListDom.querySelectorAll("li").length - 1
                    ];
                  let liLength = scrollListDom.querySelectorAll("li").length;
                  let liHeight = scrollListDomLast.clientHeight;
                  let liSumHeight = liHeight * liLength;
                  let parentHeight =
                    document.querySelector(".tableDiv").clientHeight;
                  let autoPlay = liSumHeight > parentHeight;
                  if (autoPlay) {
                    this.data1Copy = this.data1;
                    this.$refs.vueSeamlessPhbRef._startMove();
                  }
                }
              });
            }
          }
        });
    },
    //未来七日预订量
    getdata2() {
      this.$http
        .post("/sys/screen/scenic/querySevenDayBookings", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            let x = [];
            let y = [];
            for (let i = 0; i < res.data.data.length; i++) {
              x.push(res.data.data[i].playDate);
              y.push(res.data.data[i].sumCount);
            }

            this.lineChart(x, y);
          }
        });
    },
    //热门景区排行榜
    getdata3() {
      this.$http
        .post("/sys/screen/scenic/queryScenicRankingList", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              let data = res.data.data;
              let total =
                parseFloat(data[0].holidayCount) > parseFloat(data[0].workCount)
                  ? parseFloat(data[0].holidayCount) * 1.2
                  : parseFloat(data[0].workCount) * 1.2;
              let avatar = total / 5;
              this.xdata = [];
              if (total) {
                for (let i = 0; i < 5; i++) {
                  this.xdata.push(avatar * i);
                }
              }
              this.RankingTotal = total;
              this.data2 = data;
            } else {
              this.data2 = [];
            }
            console.log(this.data2);
            if (this.data2) {
              this.$nextTick(() => {
                const scrollListDom = document.querySelector(
                  ".scroll-list-seamless"
                );
                if (scrollListDom) {
                  const scrollListDomLast =
                    scrollListDom.querySelectorAll("li")[
                    scrollListDom.querySelectorAll("li").length - 1
                    ];
                  let liLength = scrollListDom.querySelectorAll("li").length;
                  let liHeight = scrollListDomLast.clientHeight;
                  let liSumHeight = liHeight * liLength;
                  let parentHeight =
                    document.querySelector(".mjzyx_pm").clientHeight;
                  let autoPlay = liSumHeight > parentHeight;
                  if (autoPlay) {
                    this.data2Copy = this.data2;
                    this.$refs.vueSeamlessRef._startMove();
                  }
                }
              });
            }
          }
        });
    },
    //年度客流对比
    getdata4() {
      this.$http
        .get("/sys/screen/scenic/queryAnnualPassengerFlows")
        .then((res) => {
          if (res.data.code == 0) {
            let data = [];
            for (let i in res.data.data) {
              data.push(res.data.data[i]);
            }
            this.getVisitoragedata(data[0], data[1]);
          }
        });
    },
    //年龄分布
    getdata5() {
      this.$http
        .post("/sys/screen/scenic/selectDifferentAgeCount", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            let xData = res.data.data.map((item) => {
              return item.ageRange;
            });
            let yData = res.data.data.map((item) => {
              return item.dataCount;
            });
            this.$nextTick(() => {
              this.getRzjjChartData(xData, yData, 'yknlChart');
            });
          }
        });
    },

    getRzjjChartData(xData, yData, refName) {
      let myChart = echarts.init(this.$refs[refName]);
      const offsetX = 10;
      const offsetY = 5;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          formatter: (params, ticket, callback) => {
            const item = params[1];
            return item.name + " : " + item.value + "人";
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          top: "16%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#035192",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        yAxis: {
          type: "value",
          name: "单位：人",
          nameTextStyle: {
            color: "#C6D7F1",
            fontWeight: 400,
            fontSize: 12,
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#545454",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        series: [
          {
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#00BFF4",
                        },
                        {
                          offset: 0.35,
                          color: "#0064B5",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#0064B5",
                        },
                        {
                          offset: 0.35,
                          color: "#00BFF4",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "#00BFF4",
                    },
                  },
                ],
              };
            },
            data: yData,
          },
          {
            type: "bar",
            itemStyle: {
              color: "transparent",
            },
            data: yData,
          },
        ],
      };
      myChart.setOption(option);
      this.resizeEcharts(this.$refs.rzjjChart);
    },
    //景区游客数量统计
    getdata6() {
      this.$http
        .post("/sys/screen/scenic/curEachScenicCount", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if(!res.data.data||res.data.data.length==0) return;
            let xData = res.data.data.map((item) => {
              return item.domainName;
            });
            let yData = res.data.data.map((item) => {
              return item.totalCount;
            });
            this.$nextTick(() => {
              this.getRzjjChartData(xData, yData, 'ykslChart');
            });
          }
        });
    },
    getdata7() {
      this.$http.get("/sys/screen/scenic/queryProvinceCount").then((res) => {
        if (res.data.code == 0) {
          this.pie(res.data.data);
          this.areaData = res.data.data;
        }
      });
    },

    // getdata8() {
    //   this.$http.get("/scenic/isscenicspot/queryChargeSpots",).then((res) => {
    //     if (res.data.code == 0) {
    //       console.log(res.data.data)
    //     //   this.pie(res.data.data);
    //     //   this.areaData = res.data.data;
    //     }
    //   });
    // },
    dateFormat(date, format) {
      format = format || "yyyy-MM-dd hh:mm:ss";
      if (date !== "Invalid Date") {
        let o = {
          "M+": date.getMonth() + 1, //month
          "d+": date.getDate(), //day
          "h+": date.getHours(), //hour
          "m+": date.getMinutes(), //minute
          "s+": date.getSeconds(), //second
          "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
          S: date.getMilliseconds(), //millisecond
        };
        if (/(y+)/.test(format))
          format = format.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (let k in o)
          if (new RegExp("(" + k + ")").test(format))
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
        return format;
      }
      return "";
    },
    //获取实时日期
    getTime() {
      const dataTime = new Date();
      this.nowDate = this.dateFormat(dataTime, "yyyy年MM月dd");
      let w = ["日", "一", "二", "三", "四", "五", "六"];
      let xinqi = dataTime.getDay();
      this.week = "星期" + w[xinqi]; //星
    },
    //解决图表鼠标悬浮错位问题
    resizeEcharts(ele) {
      let rate = 1920 / window.innerWidth;
      if (ele.style) {
        ele.style.zoom = 1 * rate;
        ele.style.transform = `scale(${1 / rate})`;
        ele.style.transformOrigin = "top left";
      }
    },
    //切换岛屿
    changeTown(id, index) {
      this.townIndex = index;
      if (!id) return;
      this.myislandId = id;
      this.init2();
      clearInterval(refreshTimer);
      // refreshTimer = setInterval(() => {
      //   this.init();
      // }, 15000);
    },
    init2() {
      //图表初始化
      this.getdata1();
      this.getdata2();
      this.getdata3();
      this.getdata6();
    },
    init() {
      this.getdata1();
      this.getdata2();
      this.getdata3();
      this.getdata4();
      this.getdata5();
      this.getdata6();
      this.getdata7();
    },
    lookMap() {
      this.$nextTick(() => {
        this.$refs.mapDiv.init();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.tableDiv {
  width: 100%;
  height: calc(100% - 44px);
  overflow: hidden;

  .td_item {
    width: calc(100% - 10px);
    height: 32px;
    margin: 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 29px;
    box-sizing: border-box;
    background: rgba(2, 65, 110, 0.3);

    .tdi_left {
      display: flex;
      align-items: center;

      .tdil_top {
        width: 47px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
      }

      .tdil_name {
        margin-left: 16px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
      }
    }

    .tdi_right {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #c6d7f1;
    }
  }
}

.screen-box {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
  background-size: 100% 100%;

  .screen-wrapper {
    position: relative;

    .dp_map {
      width: 980px;
      height: 980px;
      background-image: url(../../../assets/largescreen/new/m_map_bg.png);
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -490px;
    }

    .map_town {
      width: 90px;
      height: 41px;
      background: url("../../../assets//largescreen/town_bg.png");
      background-size: 100%;
      position: absolute;
      font-size: 14px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      padding-top: 7px;
      cursor: pointer;

      &.town_active {
        width: 106px;
        height: 95px;
        font-size: 16px;
        background: url("../../../assets//largescreen/town_active_bg.png");
        background-size: 100%;
        padding-top: 7px;
        margin-left: -8px;
        margin-top: -37px;
      }
    }
  }

  .dp_top {
    width: 100%;
    height: 118px;
    background-image: url(../../../assets/largescreen/new/top_title.png);
    background-position: center center;
    background-size: 100% 100%;
    position: relative;

    .dt_back_weather {
      position: absolute;
      top: 18px;
      left: 39px;
      display: flex;
      align-items: center;

      .dbw_fh {
        width: 102px;
        height: 38px;
        cursor: pointer;
      }

      .dbw_tianqi {
        display: flex;
        align-items: center;
        margin-left: 19px;

        img {
          width: 24px;
          height: 22px;
        }

        .tianqi {
          margin-left: 6px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #c6d7f1;
          line-height: 22px;
        }
      }
    }

    .dt_type {
      width: 180px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-position: center center;
      background-size: 100% 100%;
      position: absolute;
      top: 52px;
      cursor: pointer;
      z-index: 3;

      &>div {
        font-family: YouSheBiaoTiHei;
        font-size: 20px;
        color: #ffffff;
      }

      &.selected_left {
        background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
      }

      &.selected_right {
        background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
      }
    }

    .selected_left,
    .selected_right {
      &>div {
        background-image: linear-gradient(to bottom, #ffffff 0%, #90deff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .dt_type_ykhx,
    .dt_type_jq {
      background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
    }

    .dt_type_jdms,
    .dt_type_jt {
      background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
    }

    .dt_type_ykhx {
      left: 200px;
    }

    .dt_type_jq {
      left: 380px;
    }

    .dt_type_jdms {
      right: 380px;
    }

    .dt_type_jt {
      right: 200px;
    }

    .dt_time {
      position: absolute;
      top: 26px;
      right: 37px;
      font-family: DS, DS;
      font-size: 20px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      background-image: linear-gradient(to bottom, #fafcff 0%, #44a7fe 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dt_click {
      width: 670px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -335px;
      cursor: pointer;
      z-index: 2;
    }
  }

  .dp_middle {
    width: 100%;
    height: calc(100% - 165px);
    display: flex;

    .dm_left,
    .dm_right {
      width: 470px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .dm_left {
      padding: 0 24px 0 26px;
    }

    .dm_center {
      width: calc(100% - 940px);
      position: relative;

      .dmc_map {
        padding: 26px 23px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .dmcm_nums {
          display: flex;

          .dn_pte {
            display: flex;
            flex-direction: column;
            align-items: center;

            &:nth-child(2) {
              margin: 0 80px;
            }

            .title {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 16px;
              color: #c6d7f1;
              line-height: 22px;
            }

            .nums {
              display: flex;

              .n_item {
                width: 40px;
                height: 56px;
                line-height: 56px;
                text-align: center;
                background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                background-size: 100% 100%;
                margin: 5px 2px 0 2px;
                font-size: 30px;
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                color: #c6d7f1;

                &:first-child {
                  margin-left: 0;
                }
              }
            }
          }
        }
      }
    }

    .dm_right {
      padding: 0 26px 0 24px;
    }
  }

  .dp_bottom {
    width: 100%;
    height: 47px;
    background-image: url(../../../assets/largescreen/new/bg_bottom.png);
    background-position: center center;
    background-size: 100% 100%;
  }

  .box {
    position: relative;
    background: linear-gradient(180deg,
        rgba(7, 27, 67, 0.1) 0%,
        rgba(13, 46, 89, 0.2) 100%),
      radial-gradient(82% 15% at 50% 100%,
        rgba(39, 115, 255, 0.1) 0%,
        rgba(39, 115, 255, 0) 100%);

    .b_title {
      width: 420px;
      height: 44px;
      background: url("../../../assets/largescreen/y6.png") no-repeat;
      padding-left: 33px;
      line-height: 36px;
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      color: #ffffff;
    }

    &.c_b_box {
      width: 100%;
      height: 300px;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .dp_box {
    width: 420px;
    height: 300px;
    background: linear-gradient(180deg,
        rgba(7, 27, 67, 0.1) 0%,
        rgba(13, 46, 89, 0.2) 100%),
      radial-gradient(82% 15% at 50% 100%,
        rgba(39, 115, 255, 0.1) 0%,
        rgba(39, 115, 255, 0) 100%);
    position: relative;
  }

  .db_content {
    width: 100%;
    height: calc(100% - 44px);

    .chart {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 998;
    }
  }
}

.lp3 {
  .data {
    position: absolute;
    bottom: 15px;
    display: flex;
    justify-content: space-between;
    width: 250px;
    right: 10px;
    color: #c6d7f1;
  }

  .dot {
    position: absolute;
    right: 10px;
    color: #c6d7f1;
    top: -6px;
    font-size: 12px;
    width: 100%;
    text-align: right;

    span {
      i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: #0cff9a;
        margin-right: 4px;
      }

      &:first-child {
        margin-right: 10%;

        i {
          background: #0771ff;
        }
      }
    }
  }

  .tit {
    color: #7299d4;
    font-size: 12px;
    padding: 16px 10px 10px 10px;
    position: relative;

    span {
      display: inline-block;

      &:first-child {
        width: 68px;
      }

      &:last-child {
        position: absolute;
        right: 10px;
        bottom: 0;
      }
    }
  }
}

.ul-scoll {
  padding-left: 0;
}

.mjzyx_pm {
  width: 100%;
  height: calc(100% - 90px);
  padding: 0 10px;
  overflow: hidden;

  .mpm_item {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mpmi_left {
      width: calc(100% - 80px);
      display: flex;
      align-items: center;

      .mpmil_top {
        width: 47px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
      }

      .mpmil_city {
        margin-left: 20px;
        font-size: 14px;
        width: 120px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
        text-align: right;
      }

      .mpmil_line {
        width: 1px;
        height: 42px;
        background: #0a2840;
        margin-left: 10px;
      }

      .mpmil_bl {
        width: calc(100% - 120px);
        height: 6px;
        background: #172640;
        border-radius: 0 3px 3px 0;
        position: relative;

        .mpmil_bl_bfb {
          height: 100%;
          background: linear-gradient(270deg,
              #00bff4 0%,
              rgba(4, 110, 255, 0) 100%);
          border-radius: 0 3px 3px 0;
        }
      }
    }

    .mpmi_right {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #c6d7f1;
    }
  }
}

.looMap {
  position: absolute;
  right: 5px;
  top: -6px;
  z-index: 1;
  width: 116px;
  height: 35px;
  border-radius: 17px;
  text-align: center;
  line-height: 35px;
  background-image: linear-gradient(to bottom, #0e1b3a, #013e71);
  color: #c4dbff;
  font-size: 14px;
}
</style>